<template>
	<view class="edit-page">
		<!-- <uni-nav-bar dark left-icon="left" right-text="保存" :title="options.type=='name'?'用户名':'密码'" background-color="#55acee" @clickLeft="goBack()" @clickRight="keep()" /> -->
		<view class="input-box" v-if="options.type=='name'">
			<input type="text" placeholder-style="color:#aaa" :value="inputText" @input="input" />
			<uni-icons class="uni-icon" color="#aaaaaa" type="clear" v-if="inputText.length>0" @click="clearIcon"></uni-icons>
		</view>
		<view v-else>
			<!-- <view class="input-box">
				<text class="name letter">旧 密 码：</text>
				<input :password="show_old" maxlength="30" :value="oldPassword" @input="oldInput" />
				<uni-icons class="uni-icon" @click="show_old=!show_old" color="#aaaaaa" :type="show_old?'eye-slash-filled':'eye-filled'"></uni-icons>
			</view> -->
			<view>
			<view class="input-box">
				<text class="name letter">新 密 码：</text>
				<input :password="show_new" maxlength="30" :value="newPassword" @input="newInput" />
				<uni-icons class="uni-icon" color="#aaaaaa" :type="show_new?'eye-slash-filled':'eye-filled'" @click="show_new=!show_new"></uni-icons>
			</view>
			<view class="input-box">
				<text class="name">密码确认：</text>
				<input :password="show_again" maxlength="30" :value="againPassword" @input="againInput" />
				<uni-icons class="uni-icon" color="#aaaaaa" :type="show_again?'eye-slash-filled':'eye-filled'" @click="show_again=!show_again"></uni-icons>
			</view>
		</view>
		</view>
		<view class="tips" v-if="options.type=='name'">
			<text>{{1?"":'每月可修改1次，2022-05-02后可修改'}}</text>
			<text>{{inputText.length}}/20</text>
		</view>
		<view class="edit-tips" v-if="options.edit==1">
			<text>请尽快修改初始密码以保证账号安全</text>
		</view>
		<view class="stu-btn-text" @click="keep()" :style="{opacity: againPassword.length>=6&&newPassword.length>=6?1:.5}">
			保存
		</view>
		
		<view class="tips" style="color: #555555;"><text style="color: #D9001B;margin-bottom: 32rpx">*</text><text>温馨提示：谁都看不到你的密码哦，建议你记在小本本或者手机。不然就得麻烦老师重置密码</text></view>
	</view>
</template>
<script>
import md5 from '@/static/md5.min.js'
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
	components: {
		uniNavBar
	},
    data() {
        return {
			edit_info: {},
			inputText: '',
			showClearIcon: false,
			options: {},
			oldPassword: '',
			newPassword: '',
			show_old: false,
			show_new: false,
			againPassword:'',
			show_again: false
        }   
    },
	onLoad(options){
		this.options = options;
		let title = options.type=='pass'?'密码':'修改昵称'
		uni.setNavigationBarTitle({
			title: title
		})
	},
	methods: {
		goBack(){
			uni.navigateBack({
				delta: 1
			})
		},
		keep(){
			console.log(this.newPassword.length, this.againPassword.length)
			if(this.againPassword.length<6 || this.newPassword.length<6) return;
			console.log(this.newPassword.length, this.againPassword)
			let passMsg = '';
			if(this.newPassword!=this.againPassword){
				passMsg = '密码确认和新密码不相同'
			}
			if(passMsg!=''){
				uni.showToast({
					title: passMsg,
					icon: 'none',
					duration: 2000,
					mask: true,
					position: 'bottom'
				})
				return;
			}
		
			let password = `${this.newPassword}`
			// ,oldPassword = `${this.oldPassword}`
			this.api.post('user/modifyPassword', {
				newPassword: md5(password)
			}).then(res=>{
				if(res.data.state=='ok'){
					uni.showToast({
						title: '密码修改成功',
						icon: 'none',
						duration: 2000,
						mask: true,
						position: 'bottom'
					})
					uni.removeStorageSync('tokenObj');
					setTimeout(()=>{
						uni.reLaunch({
							// #ifdef APP-PLUS
							url: '/pages/index/login'
							// #endif
							// #ifdef H5
							url: '/pages/index/select-role'
							// #endif
						})
					}, 1000)
				}
				
			})
		},
		input(e){
			this.inputText = e.detail.value;
			if(this.inputText.length>0){
				this.showClearIcon = true
			}else{
				this.showClearIcon = false;
			}
		},
		oldInput(e){
			this.oldPassword = e.detail.value;
		},
		newInput(e){
			this.newPassword = e.detail.value;
		},
		againInput(e){
			this.againPassword = e.detail.value;
		},
		clearIcon(){
			this.inputText = '';
			this.showClearIcon = false;
		}
	}
}
</script>
<style lang="less">
	.edit-page{
		.input-box{
			margin: 0 32rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f2f2f2;
			padding: 0 32rpx;
			input{
				font-size: 28rpx;
				width: 80%;
			}
			.uni-icon{
				color: #aaa;
			}
			.name{
				white-space: nowrap;
				&.letter{
					letter-spacing: .1em;
				}
			}
		}
		.tips{
			margin: 32rpx 32rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #aaa;
		}
		.stu-btn-text{
			display: block;
			margin: 100rpx 40rpx 0;
			text-align: center;
			font-size: 28rpx;
			letter-spacing: 1em;
		}
		.edit-tips{
			margin: 32rpx 32rpx 0;
			color: #ff0000;
			font-size: 24rpx;
		}
	}
</style>